<template>
  <div class="ProjectSort">
    <Popup
      v-model="show"
      position="right"
      :style="{ width: '80%', height: '100%' }" >
      <div class="close-sort"
           @click="closePop()">
        关闭
      </div>
      <Sidebar
        v-model="activeKey"
        :style="{width: '100%'}">
          <sidebar-item title="全部"
                        @click="onclickProjecSort({id:999, type_name: '全部'})"/>
          <sidebar-item
            v-for="item in treeData"
            :key="item.id"
            @click="onclickProjecSort(item)"
            :title="item.type_name" />
      </Sidebar>
    </Popup>
  </div>
</template>

<script>
import { Sidebar, SidebarItem, Popup } from 'vant'
export default {
  name: 'ProjectSort',
  components: {
    Sidebar,
    SidebarItem,
    Popup
  },
  data () {
    return {
      activeKey: 0,
      show: false
    }
  },
  props: {
    treeData: {
      type: Array
    }
  },
  created () {},
  mounted () {},
  methods: {
    showPop () {
      this.show = true
    },
    closePop () {
      this.show = false
    },
    onclickProjecSort (sortId) {
      this.show = false
      this.$emit('sortClick', sortId)
    }
  }
}
</script>

<style scoped lang="scss">
  .ProjectSort {
    .close-sort {
      text-align: center;
      color: #ffffff;
      background-color: #66b1ff;
      line-height: 40px;
    }
  }
</style>
